<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <template v-for="item in levelList">
      <el-breadcrumb-item :key="item.path" v-on:click="$emit('activePath',item.path)" v-if="item.path !== '/e'" :to="{ path: item.path }">
        <span>{{ item.meta.title }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item :key="item.path" v-else>
        <span>{{ item.meta.title }}</span>
      </el-breadcrumb-item>
    </template>

  </el-breadcrumb>
</template>

<script>
export default {
  name: "Breadcrumb",
  data() {
    return {
      levelList: [],
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]
      if (!this.isIndex(first)) {
        matched = [{path: this.$route.matched[0].redirect, meta: {title: '首页'}}].concat(matched)
        this.levelList = matched
      } else {
        this.levelList = [{path: this.$route.matched[0].redirect, meta: {title: '首页'}}]
      }
    },
    isIndex(route) {
      const redirect = route && route.redirect
      if (!redirect) {
        return false
      }
      return redirect === '/index'
    },
  },
}
</script>

<style scoped>

</style>